<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>金币</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #head1111 {
            width: 100%;
            height: 80px;
        }

        #menu1111 ul li a {
            text-decoration: none;
            color: rgb(71, 47, 52);
            
        }

        #menu1111 ul {
            width: 500px;
            position: absolute;
            right: 80px;
        }

        #menu1111 ul li {
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin: 20px auto;
        }
        #menu1111 ul li a:hover {
            color: rgb(248, 90, 117);
        }
        #logo1111 {
            position: absolute;
            top: 5px;
            left: 100px;
            width: 100px;
            height: 100px;
        }
        .ph1111 {
            width: 70px;
            height: 70px;
        }
        #bodygold {
            width: 1000px;
            height: 800px;
            background-color: #f00;
            margin: 0 auto;
        }
        #bodygold p{
            font-size: 20px;
            position: relative;
            top: 100px;
            left: 100px;
        }
        #p1{
            float: right;
            position: relative;
            right: 100px;
        }
        #head2222{
            width: 100%;
            height: 150px;
            background-color: rgba(231, 243, 177, 0.4);
        }
        #head2222 ul{
           width: 1300px;
           margin: 0 auto;
           position: relative;
            top: -150px;
            left: 50px;
             
        }
        #head2222 ul li{
            /* border: 1px solid black; */
        float: left;
        height: 150px;
        width: 230px;
        line-height: 200px;
        text-align: center;
      
        }
        #headPic{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            border:1px solid #ccc;
            
            margin:20px auto;
            position:relative;
            overflow: hidden;
        }
        #headPic:hover #mask{
            display:block;
        }
        #mask{
            width: 150px;
            height: 150px;
            background-color: rgba(0,0,0,0.5);
            position:absolute;
            left:0;
            top:0;
            display:none;
        }
        #innerImg{
            position:absolute;
            left:30px;
            top:35px;
            /* transform: translate(-50%,-50%);    适用于不清楚自己的尺寸情况 */
        }
        #big{
            width: 100%;
            height: 600px;
            opacity: 0.6; 
            border: 1px solid black;
            float:left;
            margin-top: -800px;
        }
        #left111{
            width: 25%;
            height: 400px;
            /* background-color: #f00; */
            position: relative;
            z-index: 10;
        }
        #left111 p{
            margin-left: 100px;
        }
        #left000{
            width: 25%;
            height: 400px;
            /* background-color: #f00; */
            float: right;
            position: relative;
           top: -400px;
           z-index: 10;
        }
        #left000 p{
            margin: 50px auto;
            
        }
        #right111{
            width: 25%;
            height: 400px;
            float: right;
            /* background-color: rgb(45, 156, 101); */
           position: relative;
           top: -150px;
           z-index: 10;
        }
        #rightbot img{
            width: 300px;
            height: 100px;
            margin-top: 50px;
            margin-left: 20px;
        }
        #rightbot1 img{
            width: 300px;
            height: 100px;
            margin-top: 50px;
            margin-left: 20px;
        }
        #right000{
            width: 25%;
            height: 400px;
            float: right;
            /* background-color: rgb(207, 149, 173); */
           position: relative;
           top: -150px;
           left: 20px;
           z-index: 10;
        }
        #img222{
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        #head333{
            width: 100%;
            height: 150px;
            opacity: 0.5;
            
        }
        a{
            text-decoration: none;
            color: rgb(235, 112, 132);
        }
        #right000 ul{
            margin-top: 50px;
            margin-left: 100px;
        }
        #right000 ul li{
           height: 50px;
        }
        
        footer {
            width: 100%;
            height: 150px;
            background: #eee;
            float: left;
            /* margin-top: -300px; */
        }

        footer ul {
            width: 600px;
            height: 50px;
            margin: 0 auto;
        }

        footer ul li {
            width: 120px;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: center
        }

        #footer1 #img2 {
            margin-left: 50px;
            margin-top: 10px;
            width: 30px;
            height: 30px;
            position: relative;
            bottom: 15px;
            text-align: center
        }

        #footer1 #span2 {
            position: relative;
            top: -25px;
            margin-right: 50px;
        }

        #footer1 p {
            width: 100%;
            height: 30px;
            text-align: center
        }

        #footer1 {
            margin-top: 20px;
            width: 500px;
            height: 30px;
            margin: 0 auto;
        }

        footer p {
            margin-top: 20px;
            text-align: center;
        }

    </style>
     <script>
        window.onload = function(){
            document.querySelector('#headPic').onclick = function(){
                document.querySelector('input').click()     //模拟表单元素被单击
            }
        }
        function changeHeadPic(){
            //1.获取图片文件
            var fileHead = document.querySelector('input').files[0]
            //2.文件读取图片
            var fread = new FileReader()
            fread.onload = function(e){
                //3.把图片显示在页面中
                document.querySelector('#headPic>img').src = e.target.result
            }
            fread.readAsDataURL(fileHead)
        }
    </script>

</head>

<body>
    <div id="head2222">
            <img id="head333" src="images/c356b.jpg">
        <ul>
            <li>我的会员</li>
            <li>我的金币</li>
            <li><div id="headPic">
                <img id="img222" src="images/登录 (2).png" alt="">
                <div id="mask">
                    <img id="innerImg" src="" 
                    alt="">            
                </div>
                </div>
        </li>
            <li>个人信息</li>
            <li>优惠卷</li>
        </ul>
       
    </div>
    <form action="">
        <input type="file" name="" id="" accept="image/jpg" onchange="changeHeadPic()" style="display:none">
    </form>
    <div id="body333">
        
            <div id="right111">
            <div id="rightbot"><img src="images/21.PNG"></div>
            <div id="rightbot1"><img src="images/12.PNG"></div>
            </div>
            <div id="right000">
                <ul>
                    <li>账号：xxxxxxxxxxx</li>
                    <li><a href="login.html">修改密码</a></li>
                </ul>
            </div>
        <div id="left111"><p>会员名：xxx</p></div>
        <div id="left000"><p>这是您的金币数：0个</p>
            <p>累计足够的金币可以换小礼物哦！</p>
            <p>快去赚金币吧</p>
            <p><a href="menu.html">点击赚金币</a></p>
        </div>
       <img src="images/c356bb928d.jpg" id="big">
    </div>
    <footer>
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">优惠活动</a></li>
                <li><a href="">在线订餐</a></li>
                <li><a href="">新闻资讯</a></li>
                <li><a href="">关于我们</a></li>
            </ul>
            <div id="footer1">
                <p><img id="img2" src="images/Iphone.png" alt=""><span id="span2">150xxxxxx2014</span></p>
            </div>
            <p>互联网出版许可证编号新出网证（沪）字 7777777号</p>
    
        </footer>
</body>

</html>